<template>
  <div class="enterprise-annual-progress">
    <!-- 第一行：标题 -->
    <el-row style="margin-bottom: 20px;">
      <el-col>
        <h3>企业年报进度</h3>
      </el-col>
    </el-row>

    <!-- 第二行：仪表盘 -->
    <div class="dashboard-container">
      <el-progress 
        type="circle" 
        :percentage="reportRate" 
        :width="200"
        :stroke-width="12"
        status="success"
        v-loading="loading">
        <template #default="{ percentage }">
          <span class="percentage-value">{{ percentage }}%</span>
          <span class="percentage-label">企业年报率</span>
        </template>
      </el-progress>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getEnterpriseProgress } from '@/api/annual-report'

// 企业年报率
const reportRate = ref(0)
const loading = ref(false)

// 获取企业年报进度数据
const fetchProgressData = async () => {
  loading.value = true
  try {
    const res = await getEnterpriseProgress({})
    if (res.data && res.data.reportRate !== undefined) {
      reportRate.value = res.data.reportRate
    }
  } catch (error) {
    console.error('获取企业年报进度数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 初始化加载数据
onMounted(() => {
  fetchProgressData()
})
</script>

<style scoped>
.enterprise-annual-progress {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  height: 100%;
}

.dashboard-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.percentage-value {
  display: block;
  font-size: 28px;
  font-weight: bold;
  color: #67c23a;
}

.percentage-label {
  display: block;
  font-size: 14px;
  color: #909399;
}
</style>